<template>
  <div id="sell-order">
    <!-- 标题 -->
    <div class="column-name mb24">
      <h2 class="fl">订单管理</h2>
    </div>
    <div class="empty" style="padding-top: 20%;padding-bottom: 20%;"  v-if="goods.length<=0">
        <p class="mb36">这里面还是空的呢！去逛一逛？</p>
        <el-button type="primary" style="width:60%" @click="()=>{ this.$router.push('/')}">去逛逛</el-button>
      </div>
    <div class="goods-section" v-if="goods.length>0">
      <!-- 订单标题 -->
      <div class="goods-head">
        <div class="goods-list fl">
          <p class="fl">订单信息</p>
        </div>
        <div class="goods-info fl">
          <p>商品金额（元）</p>
        </div>
        <div class="goods-info fl">
          <p>状态</p>
        </div>
        <div class="goods-info fl">
          <p>操作</p>
        </div>
      </div>
      <!-- 订单列表 -->
      <div class="goods-body" v-for="(value,index) in goods" :key="index">
        <div class="goods-article overflow">
          <div class="goods-head">
            <div class="order-info fl pl12">
              <p class="overflow">
                <span class="fl">{{value.updateTime}}</span>
              </p>
            </div>
          </div>
          <div class="goods-outer">
            <div class="goods-box fl">
              <div class="goods-head">
                <span class="order-number fl pl12">买家：{{value.userName}}</span>
              </div>
              <div class="goods-mod overflow">
                <div class="goods-list fl">
                  <div class="goods-inner fl pl12">
                    <div class="goods-image">
                      <img :src="value.imgs.split(',')[0]" alt />
                    </div>
                  </div>
                  <div class="goods-more fl pl12">
                    <p>{{value.product_name}}</p>
                  </div>
                </div>
                <div class="goods-info fl">
                  <div class="goods-price">
                    ￥
                    <var>{{value.shop_price}}</var>
                  </div>
                </div>
                <div class="goods-info fl">
                  <div class="goods-status">{{value.show_status}}</div>
                </div>
              </div>
            </div>
            <div v-if="value.status == 1">
              <div class="goods-info fl" style="margin-top:10%" @click="cancleOrder(value.orderId)">
                <a style="color: #638db4;cursor: pointer;" >取消订单</a>
              </div>
            </div>
            <div v-if="value.status == 2">
              <div class="goods-info fl" style="margin-top:10%" @click="show(value)">
                <a style="color: #638db4;cursor: pointer;" >订单发货</a>
              </div>
            </div>
            <div v-if="value.status == 6">
              <div class="goods-info fl" style="margin-top:10%" @click="dealRefund(value.orderId)">
                <a style="color: #638db4;cursor: pointer;" >处理退款</a>
              </div>
            </div>
            <div v-if="value.status == 3">
                <div class="goods-info fl" style="margin-top:10%" @click="detail(value.orderId)">
                  <a style="color: #638db4;cursor: pointer;" >订单详细</a>
                </div>
            </div>
               <div v-if="(value.status == 4 || value.status == 5) && value.finished == 1">
                <div class="goods-info fl" style="margin-top:10%" @click="shoukuan(value.orderId)">
                  <a style="color: #638db4;cursor: pointer;" >收款</a>
                </div>
            </div>
          </div>
        </div>
      </div>
        <el-dialog
        :lockScroll="false"
            title="订单操作"
            :visible.sync="dialogFormVisible"
            style="letter-spacing: normal;"
          >
        <el-form :model="form">
          <el-form-item label="商品名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="收货人" :label-width="formLabelWidth">
            <el-input v-model="form.buyer" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="收货地址" :label-width="formLabelWidth">
            <el-input v-model="form.address" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="收货电话" :label-width="formLabelWidth">
            <el-input v-model="form.number" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="时 间" :label-width="formLabelWidth">
            <el-input v-model="form.date" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="快递单号" :label-width="formLabelWidth">
            <el-input v-model="form.logNum" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="send">确 定</el-button>
        </div>
      </el-dialog>
      <!-- <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000"></el-pagination> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: [
      ],
      dialogFormVisible: false,
      form: {
        name: "",
        buyer: "",
        address: "",
        date: "",
        number: ""
      },
      formLabelWidth: "120px"
    };
  },
  created(){
    this.init()
  },
  methods:{
    init(){
        this.axios.post("/order/sell").then(resp=>{
          if(resp.code == 0){
            this.goods = resp.data
          }
        })
    },
    cancleOrder(val){
      this.$confirm('确定取消该订单吗？', '确认信息', {
          distinguishCancelAndClose: true,
          lockScroll:false,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        .then(() => {
          this.$prompt('请输入取消原因', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              inputPattern: /\S/,
              lockScroll:false,
              inputErrorMessage: '取消订单原因不能为空！'
            }).then(({ value }) => {
                this.axios.post("/order/cancle",{
                  "id": val,
                  "from":"seller",
                  "reason":value
                }).then(resp=>{
                    if(resp.code == 0){
                      this.$message.success(resp.msg)
                      this.init()
                    }else{
                      this.$message.error(resp.msg)
                    }
                })
            }).catch(() => {    
            });
          }).catch(err=>{})
    },
    show(val){
      this.dialogFormVisible = true
      this.form.name = val.product_name
      this.form.id = val.orderId
      this.form.buyer  =val.name
      this.form.address = val.province +" "+val.city+" "+val.local+" "+val.remark
      this.form.number = val.mobile
      this.form.date = val.updateTime
    },
    send(){
      this.dialogFormVisible = false
      this.axios.post("/order/update",{
        'id':this.form.id,
        'logistics':this.form.logNum,
        'status':3
      }).then(resp=>{
            if(resp.code ==0){
                this.$message.success(resp.msg)
                this.init()
            }else{
                this.$message.error(resp.msg)
            }
      })
    },
    detail(value){
       this.$router.push({
        name:"OrderId",
        query: {
          id:value,
          fromSeller:true
        }
      })
    },
    dealRefund(val){
      this.$confirm('是否同意该退款操作?', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }).then(() => {
          this.axios.post("/order/refund",{
            id:val,
            reason:this.reason
          }).then((resp)=>{
            if(resp.code==0){
                this.$message.success(resp.msg)
                this.init()
            }
          })
        }).catch(() => {
           this.$prompt('请输入拒绝退款原因', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              inputPattern: /\S/,
              lockScroll:false,
              inputErrorMessage: '拒绝退款原因不能为空！'
            }).then(({ value }) => {
                this.axios.post("/refund/reject",{
                  id:val,
                  reason:value
                }).then((resp)=>{
                  if(resp.code==0){
                      this.$message.success(resp.msg)
                      this.init()
                  }
                })
            }).catch(() => {    
            });
        });
    },
    shoukuan(val){
    this.$prompt('请输入收款支付宝账号', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              inputPattern: /\S/,
              lockScroll:false,
              inputErrorMessage: '支付宝账号不能为空！'
            }).then(({ value }) => {
               this.axios.post("/order/summay",{
                 id:val,
                 alipay:value
               }).then((resp)=>{
                 if(resp.code ==0){
                    this.$message.success(resp.msg)
                 }else{
                    this.$message.error(resp.msg)
                 }
               })
            }).catch(() => {    
          });
  }
  },
};
</script>

<style scoped>
#sell-order {
  margin: 0 auto;
  margin-top: 36px;
  width: 1080px;
  letter-spacing: normal;
}
.goods-section .goods-box,
.goods-section .goods-list,
.goods-section .goods-info,
.goods-section .goods-inner,
.goods-section .goods-image,
.goods-section .goods-more,
.goods-section .goods-intro,
.goods-section .goods-column,
.goods-section .goods-column-last {
  letter-spacing: normal;
}

/* 标题 */
.column-name {
  font-size: 18px;
  height: 22px;
  /* background-color: aquamarine; */
}

/* 订单标题 */
.goods-section .goods-head {
  height: 38px;
  border-bottom: 1px solid #ddd;
  line-height: 38px;
  color: #888;
}
.goods-section .goods-list {
  width: 576px;
  font-size: 12px;
}
.goods-section .goods-info {
  width: 140px;
  line-height: 30px;
  text-align: center;
}

/* 订单列表 */
.goods-body {
  min-height: 220px;
}
.goods-section .goods-article {
  margin-bottom: 36px;
}
.goods-section .order-info {
  font-size: 12px;
  width: 40%;
  overflow: hidden;
}
.goods-section .goods-outer {
  letter-spacing: -4px;
  border-bottom: 1px dotted #d3d7d7;
  overflow: hidden;
}
.goods-section .goods-box {
  width: 856px;
  border-right: 1px dotted #d3d7d7;
}
.goods-section .goods-box .goods-head {
  border: 0;
}
.goods-section .order-number {
  color: #333;
  padding-right: 24px;
}
.goods-section .goods-mod {
  padding: 12px 0;

  letter-spacing: -4px;
}
.goods-section .goods-list {
  width: 576px;
  font-size: 12px;
}
.goods-section .goods-inner {
  position: relative;
  z-index: 1;
  width: 144px;
  font-size: 12px;
}
.goods-section .goods-image {
  min-width: 132px;
}
.goods-image img {
  width: 100%;
}
.goods-more,
.goods-mod .goods-info .goods-price,
.goods-mod .goods-info .goods-status {
  line-height: 147px;
}
.goods-section .goods-more {
  color: #888;
}
.goods-section .goods-price {
  font-size: 14px;
  color: #29a3d6;
}
.goods-info a:hover {
  text-decoration: underline;
}
</style>